<template>
    <div class="card p-3 mt-3 bg-white">
            <div class="card-header d-flex ai-center pb-3">
                <i class="iconfont" :class='`icon-${icon1}`'/>
                <div class="fs-xl flex-1 px-2">{{title}}</div>
                <i class="iconfont" :class='`icon-${icon2}`'/>
            </div>
            <div class="card-body pt-3">
                   <slot/> 
            </div>
    </div>
</template>
<script>
export default {
    props:{
        title:{type:String,required:true},
        icon1:{type:String,required:true},
        icon2:{type:String,required:true}
    }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/_variables.scss';
.card{
    .card-header{
        border-bottom: 1px solid $border-color;
    }
    border-bottom: 1px solid $border-color;
}
</style>